<template>
<div>
  <vm-common-header
    :pageTitle="pageTitle"
    :goBack="goBack"
  ></vm-common-header>
  <div class="vm-company-container">
    <div class="content pl40">
      <ul class="vm-common-container">
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            公司名称
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cCompanyName }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            公司地址
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cAddress }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            成立时间
          </div>
          <div class="vm-common-item-r">
            {{ companyData.dCreateDate }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            注册资本
          </div>
          <div class="vm-common-item-r">
            {{ companyData.fRegisteredCapital }}（万元）
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            联系人
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cPersonName }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            联系方式
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cPersonMobile }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            邮箱
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cMail }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            第二联系人
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cPersonNameBackup  }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            联系方式
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cPersonMobileBackup }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            税号
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cRegCode }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            开户行
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cBankID  }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            账号
          </div>
          <div class="vm-common-item-r">
            {{ companyData.cAccount  }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            开票地址
          </div>
          <div class="vm-common-item-r">
            {{ companyData.invoiceAdd }}
          </div>
        </li>
        <li class="vm-common-item">
          <div class="vm-common-item-l">
            电话
          </div>
          <div class="vm-common-item-r">
            {{ companyData.invoicePersonMobile }}
          </div>
        </li>
      </ul>
      <div class="vm-company-warp" v-show="companyQuaData.length">
        <div class="vm-aptitude-warp">
          <div class="vm-companyInfo-header">
            <h5 class="vm-companyInfo-l">资质</h5>
            <div class="vm-companyInfo-r">
              <span>第一次</span>
            </div>
          </div>
          <div class="vm-companyInfo-body">
            <vue-preview :slides="companyQuaData" @close="handleClose"></vue-preview>
          </div>
        </div>
        <div class="vm-achievement-warp" v-show="companyAptitude.length">
          <div class="vm-companyInfo-header">
            <h5 class="vm-companyInfo-l">业绩</h5>
          </div>
          <div class="vm-companyInfo-body">
           <vue-preview :slides="companyAptitude" @close="handleClose"></vue-preview>
          </div>
        </div>
      </div>
      <div class="vm-mainMaterial-warp">
        <h5>主营物资</h5>
        <ul>
          <li v-for="(list, key) in companyData.materiel" :key="key">{{list}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import vmCommonHeader from '@/components/vm-common-header.vue'
import { userInfoByArguments } from '@/utils/userHandler.js'
import { getCompanyInfo } from '@/api/company.js'
export default {
  data () {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      companyId: this.$route.query.id || userInfoByArguments('company_id'),
      companyData: new Object(),
      companyAptitude: [],
      companyQuaData: []
    }
  },
  created () {
    this.getCompanyData();
    console.log(this.companyId);
  },
  methods: {
    getCompanyData() {
      getCompanyInfo(this.companyId).then(res => {
        this.companyData = res.data.data;
        this.companyQuaData = res.data.data.qua.map(item => {
          var obj = {};
          obj.src = `http://www.vocoor.cn/${item.cPicUrl}`;
          obj.msrc = `http://www.vocoor.cn/${item.cPicUrl}`;
          obj.w = 500;
          obj.h = 500;
          return obj;
        });
        this.companyAptitude = res.data.data.rad.map(item => {
          var obj = {};
          obj.src = `http://www.vocoor.cn/${item.cPicUrl}`;
          obj.msrc = `http://www.vocoor.cn/${item.cPicUrl}`;
          obj.w = 500;
          obj.h = 500;
          return obj;
        })
      })
    },
    handleClose (index) {
      console.log(index);
    }
  },
  components: {
    'vm-common-header': vmCommonHeader,
  },
  mounted() {}
}
</script>

<style scoped lang="scss">
.vm-company-container {
  background-color: #fff;
  height: 100%;
  overflow: auto;
  .vm-company-warp {
    padding-bottom: 40px;
    border-bottom: 1px solid #eeeeee; /* no */
    .vm-companyInfo-header {
      align-items: center;
      display: flex;
      h5.vm-companyInfo-l {
        height: 120px;
        align-items: center;
        display: flex;
        font-size: 38px;
        color: #000;
        font-weight: bold;
        margin-right: 25px;
        &::before {
          content: '';
          width: 5px;
          height: 34px;
          background-color: #f34c4f;
          margin-right: 20px;
        }
      }
      div.vm-companyInfo-r {
        display: flex;
        flex-direction: column;
        span {
          color: #6ed6c6;
          font-size: 22px;
          display: flex;
        }
        p {
          color: #999999;
          font-size: 20px;
        }
      }
    }
    .vm-companyInfo-body {
      ul {
        display: flex;
        li {
          width: 225px;
          height: 160px;
          img {
            width: 100%;
            height: 100%;
          }
          margin-right: 5px;
        }
      }
    }
  }
  .vm-mainMaterial-warp {
    display: flex;
    flex-direction: column;
    h5 {
      color: #999;
      font-size: 26px;
      margin-top: 40px;
      display: flex;
      height: 55px;
    }
    ul {
      display: flex;
      flex-direction: column;
      li {
        font-size: 0.373333rem;
        color: #000000;
        display: flex;
        min-height: 50px;
        text-align: left;
      }
    }
  }
}
</style>
